Redux এর মাধ্যমে ডেটা কিভাবে প্রবাহিত হয়?

Redux একটি স্টেট ম্যানেজমেন্ট লাইব্রেরি, যা অ্যাপ্লিকেশনের ডেটা বা স্টেটকে একটি সেন্ট্রালাইজড স্থানে পরিচালনা করে। Redux-এ ডেটা প্রবাহিত হওয়ার পদ্ধতি খুবই নির্দিষ্ট এবং সুনির্দিষ্ট নিয়মে চলে। এই প্রক্রিয়াকে বলা হয় একমুখী ডেটা প্রবাহ (Unidirectional Data Flow), যেখানে ডেটা একটি নির্দিষ্ট দিক দিয়ে প্রবাহিত হয়। এই ধরণের প্রবাহ ডেভেলপারদের জন্য অ্যাপ্লিকেশনটি প্রেডিক্টেবল, ট্র্যাকযোগ্য এবং ডিবাগযোগ্য করে তোলে।

Redux-এ ডেটা প্রবাহের মূল ধাপ

Redux-এ ডেটা প্রবাহিত হওয়ার প্রধান চারটি ধাপ আছে:

1. Actions (অ্যাকশন)
2. Reducers (রিডিউসার)
3. Store (স্টোর)
4. View (ভিউ)

এই চারটি উপাদান একে অপরের সাথে কাজ করে Redux অ্যাপ্লিকেশনের ডেটা ফ্লো পরিচালনা করতে। এখন, প্রতিটি ধাপ কীভাবে কাজ করে, তা বিস্তারিতভাবে দেখা যাক।

1. Actions (অ্যাকশন)

Action হলো Redux-এর সবচেয়ে প্রথম ধাপ। এটি একটি প্লেইন JavaScript অবজেক্ট যেটি type এবং কখনো payload থাকে। একশন ডিসপ্যাচ (dispatch) করলে রিডিউসারকে জানানো হয় যে, স্টেট পরিবর্তন করার প্রয়োজন আছে।

Action একটি Signal (সংকেত) হিসেবে কাজ করে, যা বলে দেয় কিভাবে স্টেট পরিবর্তিত হবে।

অ্যাকশন উদাহরণ:

const incrementAction = {
  type: 'INCREMENT'
};

এখানে:

• type: 'INCREMENT' — এই একশনটি বলে দেয়, স্টেটের কাউন্টারকে বাড়াতে হবে।
• payload: এখানে কোনো payload নেই, কিন্তু একশন যদি কোনো ডেটা নিয়ে কাজ করত, তবে এখানে সেই ডেটা থাকত।

2. Reducers (রিডিউসার)

Reducer হল সেই ফাংশন যা current state এবং action গ্রহণ করে এবং একটি new state রিটার্ন করে। এটি স্টেটের পরিবর্তন করার জন্য একমাত্র জায়গা। তবে, রিডিউসার কখনো সরাসরি স্টেট পরিবর্তন করে না। এটি পূর্বের স্টেটের একটি কপি তৈরি করে এবং নতুন স্টেট রিটার্ন করে।

Reducer শুধু একশন দেখে স্টেটের কপি আপডেট করে। Redux-এ স্টেট পরিবর্তন কখনোই সরাসরি করা হয় না; বরং একটি নতুন কপি তৈরি হয়।

রিডিউসার উদাহরণ:

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

এখানে:

• current state: { count: 0 } — আগের স্টেট
• action: { type: 'INCREMENT' } — স্টেট পরিবর্তনের নির্দেশ

স্টেট আপডেট করার পর রিডিউসার নতুন স্টেট রিটার্ন করে।

3. Store (স্টোর)

Store হলো Redux-এর স্টেট ধারণের স্থান। এটি অ্যাপ্লিকেশনের সব স্টেট একটি জায়গায় রাখে এবং স্টেট পরিবর্তনের প্রক্রিয়ায় সমস্ত ইন্টারঅ্যাকশন ম্যানেজ করে। স্টোরে স্টেট পরিবর্তন করতে একমাত্র মাধ্যম হল Actions।

স্টোরের কাজ:

• স্টেট ধারণ করা
• অ্যাকশন ডিসপ্যাচ করা
• সাবস্ক্রিপশন করা (স্টেট পরিবর্তিত হলে আপডেট পেতে)

স্টোর তৈরি উদাহরণ:

import { createStore } from 'redux';

const store = createStore(counterReducer);

এখানে, createStore() ফাংশনটি counterReducer রিডিউসার ব্যবহার করে একটি স্টোর তৈরি করছে।

4. View (ভিউ)

View হলো Redux অ্যাপ্লিকেশনের ইউআই (UI) অংশ, যেখানে স্টেট প্রদর্শিত হয়। ভিউ সাধারণত React কম্পোনেন্টে রেন্ডার হয়। যেকোনো পরিবর্তিত স্টেট স্বয়ংক্রিয়ভাবে UI তে প্রতিফলিত হয়। Redux-এর মাধ্যমে ভিউ আপডেট করার জন্য, কম্পোনেন্টগুলি store.subscribe() ব্যবহার করে স্টোরের স্টেট পরিবর্তন সম্পর্কে অবহিত হয়।

React এ Redux স্টোরের সাথে সংযোগ স্থাপনের জন্য React-Redux লাইব্রেরি ব্যবহার করা হয়।

ভিউ আপডেটের উদাহরণ:

store.subscribe(() => {
  const state = store.getState();
  console.log(state.count);  // স্টেট পরিবর্তিত হলে UI আপডেট হবে
});

এখানে:

• store.subscribe() ব্যবহার করা হচ্ছে, যা স্টেট পরিবর্তন হলে একটি কলব্যাক ফাংশন চালাবে।
• store.getState() স্টোরের বর্তমান স্টেট রিটার্ন করে, যা UI তে ব্যবহার করা হয়।

Redux এর মাধ্যমে ডেটার একমুখী প্রবাহ

Redux-এ ডেটা একমুখীভাবে প্রবাহিত হয়, অর্থাৎ:

1. ইউজার কোনো ইন্টারঅ্যাকশন করলে একটি Action ডিসপ্যাচ হয়।
2. সেই Action রিডিউসারকে পাঠানো হয়, যা বর্তমান স্টেট এবং অ্যাকশন দেখে একটি নতুন স্টেট তৈরি করে।
3. নতুন স্টেট Store-এ সংরক্ষিত হয়।
4. View (UI) আপডেট হয়, কারণ ভিউ স্টোরের পরিবর্তন সম্পর্কে অবহিত থাকে।

এই পদ্ধতিতে, Redux অ্যাপ্লিকেশনের ডেটা প্রবাহ খুবই নিয়ন্ত্রিত এবং পূর্বানুমানযোগ্য হয়, যা ডিবাগিং এবং মেইনটেনেন্সে সাহায্য করে।

সারাংশ

Redux-এ ডেটা একমুখীভাবে প্রবাহিত হয়। প্রথমে ইউজার কোনো ইন্টারঅ্যাকশন বা কার্যক্রম শুরু করলে একটি Action ডিসপ্যাচ হয়। সেই অ্যাকশনটি Reducer দ্বারা প্রসেস করা হয় এবং একটি নতুন State তৈরি হয়। নতুন স্টেট Store-এ সংরক্ষিত হয় এবং তারপর View (UI) আপডেট হয়। এই একমুখী ডেটা ফ্লো Redux অ্যাপ্লিকেশনগুলিকে সহজে ডিবাগ এবং মেইনটেইন করা সম্ভব করে তোলে।